<template>
  <form v-on:submit.prevent="addNewTodo">
    <label>Add a toto</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    >
    </todo-item>
  </ul>
  <li v-for="n in eventNumbers">{{ n }}</li>
  <ul>
    <template v-for="item in items">
      <li>{{ item.msg }}</li>
      <li class="divider" role="presentation"></li>
    </template>
  </ul>
  <span v-for="n in 10">{{ n }}</span>
  <ul>
    <li v-for="(value, key, index) in myObject">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  <li v-for="item in items" :key="item.id">
    {{ item.message }}
  </li>
  <h1 v-show="ok">Hello!</h1>

  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
  <button @click="awesome = !awesome">Toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😂</h1>

  <div
      class="static"
      :class="[activeClass, errorClass]">
  </div>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
  <br>
  <button @click="increment">
    Hello Count is: {{ count }}
  </button>
  <button @click="mutateDeeply">
    baz
  </button>
  <button @click="state.count++">
    {{ state.count }}
  </button>
</template>

<script setup>
import {ref, onMounted, nextTick, reactive, computed} from 'vue'
import TodoItem from "./TodoItem.vue";

const numbers = ref([1,2,3,4,5])

const eventNumbers = computed(() => {
  return numbers.value.filter(n => n % 2 === 0)
})

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

const parentMessage = ref('Parent')
const items = ref([{message:'Foo'},{message:'Bar'}])

const ok = ref(true)

const type = ref('D')

const awesome = ref(true)

const isActive = ref(false)
const error = ref(null)
const hasError = ref(true)

const activeClass = ref('active')
const errorClass = ref('text-danger')

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value !== 'fatal'
}))

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // p.s. 这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

const author = reactive({
  name: 'Vue Team',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性
const publishedBooksMessage = computed(() => {
  // 这个 getter 函数会在依赖改变时被调用
  return author.books.length > 0 ? 'Yes' : 'No'
})

// 响应式状态
const count = ref(0)

console.log(count)
console.log(count.value)

count.value++
console.log(count.value)

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

const state = reactive({
  count: 0
})

const raw = {}
const proxy = reactive(raw)
// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

// 用来修改状态、触发更新的函数
async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

function mutateDeeply() {
  obj.value.nested.count++
  obj.value.arr.push('baz')
}


const newTodoText = ref('')
const todos = ref([
  {
    id: 1,
    title: 'Do the dishes'
  },
  {
    id: 2,
    title: 'Take out the trash'
  },
  {
    id: 3,
    title: 'Mow the lawn'
  }
])

let nextTodoId = 4

function addNewTodo() {
  todos.value.push({
    id: nextTodoId++,
    title: newTodoText.value
  })
  newTodoText.value = ''
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

